<template>
  <div class="container">
    <Header></Header>
    <div class="container-top">
      <div class="englist-left">
        <van-tabs v-model:active="active" @change="getList1">
          <van-tab v-for="item in eningList.categories" :title="item.title"></van-tab>
        </van-tabs>
      </div>
      <el-icon class="ArrowDown-icon" @click="icCkecked = !icCkecked">
        <ArrowDown />
      </el-icon>
    </div>
    <div class="container-List" v-show="icCkecked">
      <div class="container-Lis-top">
        <div class="text">请选择分类</div>
        <el-icon class="ArrowUp-icon" @click="icCkecked = !icCkecked">
          <ArrowUp />
        </el-icon>
      </div>
      <div class="container-Lis-bottom" @change="getList2">
        <a @click="getList2(index)" class="btn" v-for="(item,index) in eningList.categories">{{ item.title }}</a>
      </div>
    </div>
    <a :href="listeningDetailUrl">
    <div class="container-content" @click="goToDetail(item.url)" v-for="item in listeningList">
      <img :src="item.authorAvatar" alt="">
      <div class="container-content-right">
        <p>{{ item.title }}</p>
        <p>
          <el-icon class="VideoCamera-icon" @click="icCkecked = !icCkecked">
            <VideoCamera />
          </el-icon>
          &nbsp;
          <span>{{ item.pageView }}</span>
          &nbsp;
          <span>2021-8-27</span>更新
        </p>
      </div>
    </div>
  </a>
  </div>
</template>

<script setup lang="ts">
import Header from '@/components/header/index.vue';
import { ref, onMounted } from 'vue';
import { getEningList, getListeningList, getListeningDetail } from '@/api/listening/listening.ts';
// 用于保存分类列表的数据
let eningList = ref<any>({});
// 用于保存听单列表的数据
let listeningList = ref<any[]>([]);
// 用于控制加载样式
let loading = ref<boolean>(false);
// 存储听单详情URL
let listeningDetailUrl = ref<string>('');

const active = ref(1);
// 控制菜单的显示和隐藏
let icCkecked = ref<boolean>(false);
onMounted(() => {
  getEningListData();
  getListeningList1();
})

// 获取分类列表的功能函数
async function getEningListData() {
  let result = await getEningList();
  if (result.ret === 200) {
    eningList.value = result.data;
  }
  // console.log(eningList.value.categories);
}

// 定义请求参数
const queryValue = {
  title: 'youshengshu',
  pageNum: 1,
  pageSize: 10,
}
// 获取某个分类下听单列表的功能函数
async function getListeningList1() {
  loading.value = true;
  let result = await getListeningList(queryValue);
  // console.log(result);
  if (result.ret === 200) {
    let items = result.data.subjects;
    // console.log(items);
    listeningList.value = items
  }
  loading.value = false;
}
// 根据点击的分类获取听单列表的功能函数
function getList1 (e) {
  // console.log(e);
  
  // console.log(eningList.value.categories[e]);
  // console.log(eningList.value);
  queryValue.title = eningList.value.categories[e].name;
  getListeningList1();
}
//点击下拉框 展示对应的数据
function getList2 (num : number){
  icCkecked.value = false;
  active.value = num;
  queryValue.title = eningList.value.categories[num].name;
  getListeningList1();
}

// 点击听单列表查看详情的功能函数
async function goToDetail (url) {
  // console.log(url);
  let result = await getListeningDetail(url);
  console.log(result);
  listeningDetailUrl.value = result;
}
</script>


<style lang="less" scoped>
.container {
  position: relative;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #a3a3ac;
  box-sizing: border-box;
  width: 365px;

  .container-top {
    height: 45px;
    border-bottom: 1px solid #e6e6e6;

    .englist-left {
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      max-width: 80%;

      a {
        line-height: 45px;
        margin: 0 15px;
        color: #a3a3ac;

        &:hover {
          font-size: 18px;
          color: #40404c;
          border-bottom: 3px solid rgb(240, 142, 13);
        }
      }
    }

    .ArrowDown-icon {
      float: right;
      margin-top: 15px;
      font-size: 18px;
      border-left: 1px solid #e6e6e6;
      margin-right: 10px;
      padding-left: 10px;
    }
  }

  .container-List {
    position: absolute;
    top: 100px;
    background-color: #ffffff;
    width: 100%;
    height: 392px;
    z-index: 99;

    .container-Lis-top {
      height: 46px;
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      justify-content: space-between;

      .text {
        height: 45px;
        line-height: 45px;
        margin-left: 10px;
      }

      .ArrowUp-icon {
        height: 45px;
        line-height: 45px;
        font-size: 18px;
        border-left: 1px solid #e6e6e6;
        margin-right: 10px;
        padding-left: 10px;
        color: darkorange;
      }
    }

    .container-Lis-bottom {
      height: 345px;
      overflow: auto;

      .btn {
        width: 27.733%;
        height: 32px;
        margin: 7.5px 2%;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #40404c;
        text-align: center;
        line-height: 32px;
        background: #f3f4f5;
        border-radius: 4px;
        display: inline-block;
      }
    }

  }

  .container-content {
    display: flex;
    align-items: left;
    width: 100%;
    height: 100px;
    // background-color: blueviolet;
    margin-left: 10px;

    // padding: 15px 0;
    img {
      display: inline-block;
      width: 70px;
      height: 70px;
      margin: 15px 0;
    }

    .container-content-right {
      width: 450px;
      height: 70px;
      // background-color: #40404c;
      margin: 15px 0;
      margin-left: 10px;
      overflow: hidden;

      p {
        &:first-child {
          height: 44px;
          text-align: left;
          font-size: 16px;
          color: #40404c;
          font-family: PingFangSC-Medium;
          margin-left: 5px;
          line-height: 22px;
          overflow: hidden;
        }

        &:last-child {
          .VideoCamera-icon {
            font-size: 16px;
          }

          &:nth-child(4) {
            // margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>